<template>
	<div>
		<div :class="isFullscreen?'el-icon-full-screen ':'el-icon-switch-button'" @click="change"></div>
	</div>
</template>

<script>
	import screenfull from 'screenfull'

	export default {
		name: 'Screenfull',
		data() {
			return {
				isFullscreen: true
			}
		},
		mounted() {
			this.init()
		},
		beforeDestroy() {
			this.destroy()
		},
		methods: {
			change() {
				this.isFullscreen = screenfull.isFullscreen
				screenfull.toggle()
			},
			init() {
				console.log(screenfull.isFullscreen);
				if (screenfull.isFullscreen) {
					screenfull.on('change', this.change)
				}
			},
			destroy() {
				if (screenfull.isFullscreen) {
					screenfull.off('change', this.change)
				}
			}
		}
	}
</script>

<style scoped>
	.screenfull-svg {
		display: inline-block;
		cursor: pointer;
		fill: #5a5e66;
		;
		width: 20px;
		height: 20px;
		vertical-align: 10px;
	}
</style>
